<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="registerDrawer"
    showFooter
    title="用户接收情况"
    :width="1000"
  >
    <BasicTable :searchInfo="searchInfo" @register="registerTable"> </BasicTable>
  </BasicDrawer>
</template>
<script lang="ts">
  import { defineComponent, reactive } from 'vue';
  import { BasicForm } from '@/components/Form';
  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
  import { selectMessageReceiverUserDetail } from '@/api/sys/sysMessageDetail';
  import { BasicTable, useTable } from '@/components/Table';

  export default defineComponent({
    name: 'ReceiverUserDetailDrawer',
    components: { BasicTable, BasicForm, BasicDrawer },
    emits: ['success', 'register'],
    setup() {
      const searchInfo = reactive<Recordable>({ messageId: null });

      const [registerDrawer, { changeLoading }] = useDrawerInner(async ({ messageId }) => {
        changeLoading(true);
        searchInfo.messageId = messageId;
        await reload();
        changeLoading(false);
      });

      /**
       * 初始化表格
       */
      const [registerTable, { reload }] = useTable({
        showTableSetting: false,
        api: selectMessageReceiverUserDetail,
        columns: [
          {
            title: '接收人部门',
            dataIndex: 'receiverUserDeptName',
            sortField: 'sd.name',
            sorter: true,
            width: 200,
          },
          {
            title: '接收人',
            dataIndex: 'receiverUser',
            sortField: 'su.nickname',
            sorter: true,
            width: 200,
          },
          {
            title: '状态',
            dataIndex: 'status',
            sorter: true,
            width: 120,
            format: 'dict|messageStatus',
            filters: 'dict|messageStatus',
          },
          {
            title: '阅读时间',
            dataIndex: 'readDate',
            sorter: true,
            width: 160,
            format: 'date|YYYY-MM-DD HH:mm',
          },
        ],
        useSearchForm: true,
        formConfig: {
          schemas: [
            {
              field: 'receiverUserDeptName',
              label: '接收人部门',
              component: 'Input',
            },
            {
              field: 'receiverUser',
              label: '接收人',
              component: 'Input',
            },
          ],
          baseColProps: {
            xl: 8,
            md: 12,
            sm: 24,
          },
        },
      });

      return { searchInfo, registerDrawer, registerTable };
    },
  });
</script>
<style lang="less" scoped>
  .vben-basic-table-form-container {
    padding: 0;

    :deep(.ant-form) {
      margin-bottom: 0;
    }
  }
</style>
